import React from "react";

interface MessageSkeletonProps {
  /** 骨架屏的行数 */
  lines?: number;
  /** 是否显示头像 */
  showAvatar?: boolean;
}

/**
 * 消息骨架屏组件
 *
 * 用于在AI消息加载中但尚未有内容时显示的占位符
 * 模拟消息的结构，包括头像和多行文本
 */
const MessageSkeleton: React.FC<MessageSkeletonProps> = ({
  lines = 3,
  showAvatar = true,
}) => {
  return (
    <div className="flex animate-pulse">
      {showAvatar && (
        <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-2 mt-1 flex-shrink-0">
          <div className="w-5 h-5 rounded-full bg-blue-200 dark:bg-blue-700/50"></div>
        </div>
      )}
      <div className="rounded-lg px-4 py-3 bg-white dark:bg-gray-800 shadow-sm max-w-[85%] md:max-w-[75%] w-full">
        <div className="space-y-2">
          {Array.from({ length: lines }).map((_, index) => (
            <div
              key={index}
              className={`h-4 bg-gray-200 dark:bg-gray-700 rounded ${
                index === lines - 1 && lines > 1 ? "w-3/4" : "w-full"
              }`}
            ></div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default MessageSkeleton;
